<template>
  <div>
    <div class="header">
      <img src="../../assets/images/register/logo.png" style="width: 268px;height: 78px">
    </div>
    <div class="register">
<!--      在这里加一个判断 如果屏幕距离小于多少多少 就display=none不显示左边！-->
      <div class="register-container">
        <div :class="isleft?'register-left':'none'">
          <h4>倍赛BasicFinder——AI数据基础服务供应商</h4>
          <div class="info-title"><span></span>● 数据标注与采集服务</div>
          <div class="info-content">交付时间有保障 · 标注数据质量高 · 标注数据更安全 · 高精尖硬件支持</div>
          <div class="info-title"><span></span>● BasicFinder HIVE 数据标注私有化系统</div>
          <div class="info-content">1000套标注模板 · 含17款标注工具 · 支持项目流程管理 · 支持预标模型接入</div>
          <div class="info-img">
            <div>
              <b-carousel
                id="carousel-1"
                v-model="slide"
                :interval="4000"
                controls
                indicators
                background="#ababab"
                img-width="300"
                img-height="238"
                style="text-shadow: 1px 1px 2px #333;"
                @sliding-start="onSlideStart"
                @sliding-end="onSlideEnd"
              >
                <!-- Text slides with image -->
                <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=52">
                </b-carousel-slide>
                <!-- Slides with custom text -->
                <b-carousel-slide img-src="https://picsum.photos/1024/480/?image=54">
                </b-carousel-slide>
              </b-carousel>
            </div>
          </div>
          <div class="contact">
            <div>标注工具及私有化平台咨询</div>
            <div class="phone">
              <div class="item"><i class="el-icon-mobile-phone"></i> +86 185 1891 9170 (同微信)</div>
              <div class="item"><i class="el-icon-message"></i>  support@basicfinder.com</div>
            </div>
          </div>
          <div class="contact">
            <div>标注工具及私有化平台咨询</div>
            <div class="phone">
              <div class="item"><i class="el-icon-mobile-phone"></i> +86 185 1891 9170 (同微信)</div>
            </div>
          </div>
        </div>
        <div class="register-right">
          <div class="main-title">申请试用</div>
          <div class="main-form">
            <b-form-input v-model="text" placeholder="邮箱地址" type="email" class="input"></b-form-input>
            <b-form-input v-model="companyname" placeholder="公司名称" id="input-valid" :state="nameState" class="input"></b-form-input>
            <b-form-invalid-feedback id="input-live-feedback">
              公司名称应该包含至少2个字符
            </b-form-invalid-feedback>
            <b-form-input v-model="text" placeholder="您的姓名" class="input"></b-form-input>
            <b-form-input v-model="text" placeholder="您的电话" type="tel" class="input"></b-form-input>
            <div class="iden">
              <b-form-input v-model="text" placeholder="您的验证码" class="input1"></b-form-input>
              <!-------验证码的组件！！！-------->
              <s-identify :identify-code="identifycode"></s-identify>
            </div>
            <div class="bottom">
              <div>
                <b-form-group label="想要了解">
                  <b-form-checkbox-group id="checkbox-group-2" v-model="selected" name="flavour-2">
                    <b-form-checkbox value="orange">Orange</b-form-checkbox>
                    <b-form-checkbox value="apple">Apple</b-form-checkbox>
                    <b-form-checkbox value="pineapple">Pineapple</b-form-checkbox>
                    <b-form-checkbox value="grape">Grape</b-form-checkbox>
                  </b-form-checkbox-group>
                </b-form-group>
                <b-form-textarea
                  id="textarea-default"
                  size="sm"
                  placeholder="请输入简要描述"
                ></b-form-textarea>
                <b-button variant="primary" class="button">提交申请</b-button>
                <div class="tip">申请试用即表示您同意并愿意遵守 BasicFinder 用户协议</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SIdentify from "../../components/identify/index";
export default {
  name: 'try',
  components: {SIdentify},
  data () {
    return {
      text: '',
      selected: [],
      companyname: '',
      isleft: true,
      screenWidth: document.body.clientWidth,
      identifyCode: '',
      identifyCodes: '1234567890',
      eg1: require('../../assets/images/home-eg1.png'),
      part3: require('../../assets/images/home-part3.png')
    }
  },
  computed: {
    nameState() {
      return this.companyname.length > 2 ? true : false
    }
  },
  mounted () {
    const that = this
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        that.screenWidth = window.screenWidth
        console.log('进入了')
        if (that.screenWidth < 900) {
          this.isleft = false
        }
        else {
          this.isleft = true
          // console.log(this.isleft)
        }
      })()
    }
    this.identifyCode = ''
    this.makeCode(this.identifyCodes, 4)
  },
  watch: {
    screenWidth(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenWidth = val
        this.timer = true
        let that = this
        setTimeout(function () {
          // 打印screenWidth变化的值 当宽度为1000的时候就切换显示画面！！！
          console.log(that.screenWidth)
          if (that.screenWidth < 900) {
            this.isleft = false
            // console.log(this.isleft)
          }
          else {
            this.isleft = true
            // console.log(this.isleft)
          }
          that.timer = false
        }, 400)
      }
    }
  },
  methods: {
    randomNum (min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    refreshCode () {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    makeCode (o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ]
      }
    }
  }
}
</script>

<style scoped lang="less">
.header{
  padding: 40px 30px 0;
}
.register{
  padding: 0 6%;
  .register-container{
    display: flex;
    justify-content: space-around;
  }
  .register-left{
    padding: 5% 20px 0;
    width: 70%;
    max-width: 640px;
    h4{
      color: #004581;
      margin-bottom: 30px;
      font-weight: 600;
    }
    .info-title{
      font-size: 18px;
      span{
        border-radius: 100px;
        width: 10px;
        height: 10px;
        background-color: var(--dark);
        -webkit-border-radius: 100px;
      }
    }
    .info-content{
      margin: 10px 0;
      font-size: 14px;
    }
    .info-img{
      margin-right: 10%;
    }
    .contact{
      margin-right: 10%;
      font-size: 14px;
      margin-top: 25px;
      .phone{
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
      }
    }
  }
  .none{
    display: none;
  }
  .register-right{
    box-shadow: 0 3px 45px rgba(176,227,251,.61);
    max-width: 405px;
    border-radius: 8px;
    margin: 0 0 10%;
    .main-title{
      text-align: center;
      font-weight: 700;
      padding-top: 30px;
      font-size: 24px;
    }
    .main-form{
      padding: 20px 30px;
      .input{
        margin-bottom: 20px;
      }
      .iden{
        display: flex;
        .input1{
          margin-bottom: 20px;
          margin-right: 10px;
        }
      }
      .bottom{
        .button{
          width: 100%;
          margin: 20px 0;
        }
        .tip{
          text-align: center;
          color: #999999;
          font-size: 13px;
          padding: 0 20px;
        }
      }
    }
  }
}
</style>
